<template>
	<van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
	<div class="contain">
		<div style=" background-color: aliceblue; align-items: center;">
			<!-- <van-nav-bar title="用户注册" /> -->
			<van-image round width="8rem" height="8rem"
				src="../../../static/img/myimg.png"
				style=" display: block; margin: auto; margin-bottom: 16px; " />
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field 
						v-model="username" 
						name="username" 
						label="用户名" 
						placeholder="用户名" 
						:rules="[{ required: true, message: '请填写用户名' }]" />
					<van-field 
						v-model="password" 
						type="password" 
						name="password" 
						label="密码" 
						placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]" />
					<van-field 
						v-model="re_password" 
						type="password" 
						name="re_password" 
						label="密码" 
						placeholder="再次输入密码密码" 
						:rules="[{ required: true, message: '再次输入密码密码' },
						{validator: checkRepassword,message: '两次输入的密码不一致'}]" />
				</van-cell-group>
				
				<div style="margin: 16px;text-align:center;">
					<van-button round block color="#FFB5C5" native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</div>
		<div class="right side-margin">
			<!-- <p>已经有帐号了，去<router-link to="/login">登录</router-link></p> -->
			<p class="notice">已经有帐号了，去<router-link class="login" :to="{'name':'login'}">登录</router-link>
			</p>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { Toast } from 'vant';
	import 'vant/es/toast/style';
	import { checkUsername, createUser } from "@/api/user.ts";
	import router from '@/router'
	
	const onClickLeft = () => history.back();

	const username = ref('')
	const password = ref('')
	const re_password = ref('')

	function onSubmit(data){
		console.log('submit', data);
		createUser(data)
			.then(res => {
				if (res.code != 0) {
					// 注册失败
					console.log(res)
					Toast.fail("注册失败\n"+res.message)
				} else {
					// 注册成功
					Toast.success('注册成功')
					console.log("注册成功")
					// router.push({
					// 	"name":"login"
					// })
					router.push({
						name:"login",
						query: {date:new Date().getTime()}
					})
				}
			})
			.catch(err => {
				console.log(err)
			})
	};


	const checkRepassword = (val) => {
		console.log("检查两次密码是否一致")
		if (password.value != re_password.value) {
			return false
		}
		return true
	}


</script>

<style>
	* {
		font-size: 16px;
	}
	
	.notice{
		color: #FFB5C5;
	}
	
	.login{
		color: #434738;
	}
	
	html,body,#app {
		height: 100%;
	}
	
	.contain {
		height: 100%;
		background-color: #F0F8FF;
	}
	
	:root {
		--van-button-round-border-radius: 5px;
		--van-nav-bar-background-color: #FFB5C5;
		--van-nav-bar-height: 72px;
		--van-nav-bar-title-text-color: white;
		--van-nav-bar-title-font-size: 20px;
		--van-nav-bar-arrow-size: 20px;
	}
	
	.van-icon-arrow-left {
		color: var(--nav-bar-icon-color, #FFF) !important;
	}
</style>
